import React from 'react';
import wind from '@/assets/datang/market/wind.png';
import pv from '@/assets/datang/market/pv.png';
import water from '@/assets/datang/market/water.png';
import styles from './index.less';

const list = [
  { id: 'wind', name: '风电', icon: wind },
  { id: 'pv', name: '光伏', icon: pv },
  { id: 'water', name: '水电', icon: water },
];
export default ({ dataSource }) => {
  return (
    <div className={styles.container}>
      <div>
        {list.map(({ id, name, icon }) => {
          const itemData = dataSource?.layout?.joinMarket?.[id];
          return (
            <div key={id} className={styles.item}>
              <div className={styles.label}>
                <img src={icon} />
                {name}
              </div>
              <div style={{ minWidth: '3em' }}>
                <div className={styles.gray}>场站</div>
                <div className={styles.flex}>
                  <div className={styles.value}>{itemData?.count || 0}</div>
                  <div className={styles.gray}>个</div>
                </div>
              </div>
              <div>
                <div className={styles.gray}>装机容量</div>
                <div className={styles.flex}>
                  <div className={styles.value}>{itemData?.inscap || 0}</div>
                  <div className={styles.gray}>MW</div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};
